<template>
  <el-container style="height: 100vh;">
    <el-header style="background-color: #cce5ff; text-align: center; padding: 20px;">
      <h2>{{ headerTitle }}</h2>
    </el-header>

    <el-container>
      <el-aside width="200px" style="background-color: #f0f8ff; padding-top: 20px;">
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" background-color="#f0f8ff">
          <el-menu-item index="1" @click="activeMenu = '1'">
            <el-icon><Document></Document></el-icon>
            <span>审核医疗报销申请</span>
          </el-menu-item>
          <el-menu-item index="2" @click="activeMenu = '2'">
            <el-icon><Document></Document></el-icon>
            <span>参保人员个人信息</span>
          </el-menu-item>
          <el-menu-item index="3" @click="activeMenu = '3'">
            <el-icon><Document></Document></el-icon>
            <span>医保机构</span>
          </el-menu-item>
          <el-menu-item index="4" @click="activeMenu = '4'">
            <el-icon><Location></Location></el-icon>
            <span>医疗服务</span>
          </el-menu-item>
          <el-menu-item index="5" @click="activeMenu = '5'">
            <el-icon><Document></Document></el-icon>
            <span>医保中心工作人员</span>
          </el-menu-item>
          <el-menu-item index="6" @click="activeMenu = '6'">
            <el-icon><Document></Document></el-icon>
            <span>医保审批</span>
          </el-menu-item>
          <el-menu-item index="7" @click="activeMenu = '7'">
            <el-icon><Document></Document></el-icon>
            <span>报销记录</span>
          </el-menu-item>
          <el-menu-item index="8" @click="activeMenu = '8'">
            <el-icon><Document></Document></el-icon>
            <span>医疗基本信息</span>
          </el-menu-item>
          <el-menu-item index="9" @click="activeMenu = '9'">
            <el-icon><Document></Document></el-icon>
            <span>登录信息</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main style="background-color: #e3f2fd; padding: 20px;">
        <component :is="currentComponent"></component>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 从 Element Plus 图标库中导入图标
import { Document, Location } from '@element-plus/icons-vue';
import MedicalApproval from '../components/MedicalApproval.vue';
import StaffReimbursementRecord from '../components/StaffReimbursementRecord.vue';
import MedicalBasicInfo from '../components/MedicalBasicInfo.vue';
import UserManage from '../components/UserManage.vue';
import MedicalStaff from '../components/MedicalStaff.vue';
import InsuredPersonManage from '../components/InsuredPersonManage.vue';
import MedicalInstitution from '../components/MedicalInstitution.vue';
import MedicalService from '../components/MedicalService.vue';
import PendingReimbursement from '../components/PendingReimbursement.vue';
import AllMedicalService from "@/components/AllMedicalService.vue";

export default {
  components: {
    Document,
    Location,
    MedicalApproval,
    StaffReimbursementRecord,
    MedicalBasicInfo,
    UserManage,
    MedicalStaff,
    InsuredPersonManage,
    MedicalInstitution,
    MedicalService
  },
  data() {
    return {
      activeMenu: '1', // 默认显示
      headerTitle: '医疗保险管理系统'
    };
  },
  computed: {
    currentComponent() {
      switch (this.activeMenu) {
        case '1':
          return PendingReimbursement;
        case '2':
          return InsuredPersonManage;
        case '3':
          return MedicalInstitution;
        case '4':
          return AllMedicalService;
        case '5':
          return MedicalStaff;
        case '6':
          return MedicalApproval;
        case '7':
          return StaffReimbursementRecord;
        case '8':
          return MedicalBasicInfo;
        case '9':
          return UserManage;
        default:
          return InsuredPersonManage; // 默认返回主页组件
      }
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: linear-gradient(to right, #808080, #a6c1ee);
}

.login-wrapper {
  background-color: #fff;
  width: 358px;
  height: 588px;
  border-radius: 15px;
  padding: 0 50px;
}

.header {
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
}

.input-item {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  border: none;
  border-bottom: 1px solid rgb(128, 125, 125);
  background: none;
  font-size: 15px;
  outline: none;
}

.input-item::placeholder {
  text-transform: uppercase;
}

.btn {
  text-align: center;
  padding: 10px;
  width: 100%;
  margin-top: 40px;
  background-image: linear-gradient(to right, #a6c1ee, #808080);
  color: #fff;
}

.msg {
  text-align: center;
  line-height: 88px;
}

a {
  text-decoration-line: none;
  color: #abc1ee;
}
</style>
